<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见问题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="__PUBLIC__/Product/js/lib/flexible.js"></script>
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
        .problem_box{
            width: 10rem;
            position: relative;
        }
        /* 头部 */
		.problem_box .problem_heard{
			width: 10rem;
			height: 1rem;
			background: linear-gradient(to right, #6951bc, #a163e0);
			position: relative;
		}
		.problem_box .problem_heard img{
			width: 0.226667rem;
			height: 0.453333rem;
			position: absolute;
			bottom: 0.26rem;
			left: 0.266666rem;
		}
		.problem_box .problem_heard p{
			font-size: 0.48rem;
			line-height: 1rem;
			text-align: center;
			color: white;
		}
		.problem_box .problem_con{
			width: 9.46666666rem;
			padding: 0 0.26666666rem;
			background-color: white;
		}
		.problem_con .list_ul{
			width: 100%;
			margin-top: 0.13333333rem;
		}
		.problem_con .list_ul .list_li{
			width: 100%;
			list-style: none;
			border-bottom: 0.01333333rem solid #f4f4f4;
		}
		.list_li .show{
			font-size: 0.37333333rem;
			line-height: 1.33333333rem;
			position: relative;
		}
		.show .left_img{
			width: 0.34666666rem;
			height: 0.34666666rem;
			position: absolute;
			top: 0.49333333rem;
		}
		.show span{
			margin-left: 0.66666666rem;
		}
		.show .right_img{
			width: 0.16rem;
			height: 0.26666666rem;
			position: absolute;
			right: 0;
			top: 0.53333333rem;
		}
		.list_li .hidden{
			background-color: #f4f4f4;
			padding: 0.4rem;
			font-size: 0.34666666rem;
			display: none;
		}
		.show .roate{
			transform:rotate(90deg);		//偏转30度  
			-moz-transform:rotate(90deg);	//兼容Firefox及Opera  
			-o-transform:rotate(90deg);
		}
    </style>
</head>
<body style="background-color: #f4f4f4;">
    <div class="problem_box">
        <!-- 头部 -->
        <div class="problem_heard">
            <img class="GoBack" src="__PUBLIC__/Product/img/fanhui.png" alt="返回">
            <p>常见问题</p>
        </div>
        <!-- 内容 -->
        <div class="problem_con">
        	<ul class="list_ul">
        		<li class="list_li">
        			<div class="show">
        				<img class="left_img" src="__PUBLIC__/Product/img/q.png" alt="" />
        				<span>怎样参加0元夺宝</span>
        				<img class="right_img" src="__PUBLIC__/Product/img/right_gou.png" alt="" />
        			</div>
        			<div class="hidden">
        				<p>让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！</p>
        			</div>
        		</li>
        		<li class="list_li">
        			<div class="show">
        				<img class="left_img" src="__PUBLIC__/Product/img/q.png" alt="" />
        				<span>怎样参加0元夺宝</span>
        				<img class="right_img" src="__PUBLIC__/Product/img/right_gou.png" alt="" />
        			</div>
        			<div class="hidden">
        				<p>让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！</p>
        			</div>
        		</li>
        		<li class="list_li">
        			<div class="show">
        				<img class="left_img" src="__PUBLIC__/Product/img/q.png" alt="" />
        				<span>怎样参加0元夺宝</span>
        				<img class="right_img" src="__PUBLIC__/Product/img/right_gou.png" alt="" />
        			</div>
        			<div class="hidden">
        				<p>让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！</p>
        			</div>
        		</li>
        		<li class="list_li">
        			<div class="show">
        				<img class="left_img" src="__PUBLIC__/Product/img/q.png" alt="" />
        				<span>怎样参加0元夺宝</span>
        				<img class="right_img" src="__PUBLIC__/Product/img/right_gou.png" alt="" />
        			</div>
        			<div class="hidden">
        				<p>让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！让我来告诉你如何参加夺宝吧！</p>
        			</div>
        		</li>
        	</ul>
        </div>
    </div>
</body>
</html>
<script src="__PUBLIC__/Product/js/lib/jquery3.2.1.js"></script>
<script>
	$(function(){
		$('.GoBack').bind('click',function(){
			window.location.href = document.referrer;	//返回上一页并刷新
		});
		$('.list_li').bind('click',function(){
			$(this).children('.hidden').toggle();
			$(this).children('.show').children('.right_img').toggleClass('roate');
		});
	});
</script>